<template>
    <div class="container">
        <div class="tip">
            <van-nav-bar @click-left="left">
                <template #left>
                    <van-icon name="cross" color="black" size="25px" />
                </template>
                <template #title>
                    <p>当前位置 - {{ store.state.city.name }}</p>
                </template>
            </van-nav-bar>
        </div>
        <div class="search">
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <div class="dw">
            <div class="dw1">
                <p class="GPS">GPS定位你所在的城市</p>
                <div class="sb">定位失败</div>
            </div>
            <div class="hotbox">
                <div class="city-title">热门城市</div>
                <ul class="city-index">
                    <li @click="select(item)" v-for="(item, index) in hot.data" :key="index">
                        <div>{{ item.name }}</div>
                    </li>
                </ul>
            </div>
        </div>
        <van-index-bar :index-list="Object.keys(cities.data)">
            <div v-for="(value, key, index) in cities.data" :key="index">
                <van-index-anchor class="theheader" :index="key">{{ key }}</van-index-anchor>
                <van-cell @click="select(item)" :title="item.name" v-for="(item, idx) in value" :key="idx" />
            </div>
        </van-index-bar>
    </div>
</template>

<script setup>
import { city } from '@/request/request'
// import Vue from 'vue';
import { NavBar } from 'vant';
import { Icon } from 'vant';
import { Search } from 'vant';
import { Grid, GridItem } from 'vant';
import { Cell, CellGroup } from 'vant';
import { IndexBar, IndexAnchor } from 'vant';
import store from '@/store'
import { createApp, ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const app = createApp();
const router = useRouter()
const route = useRoute()
app.use(IndexBar);
app.use(IndexAnchor);
app.use(Cell);
app.use(CellGroup);
app.use(Grid);
app.use(GridItem);
app.use(Search);
app.use(Icon);
app.use(NavBar);

let cities = reactive({
    data: {}
})
let value = ref('')
let hot = reactive({
    data: []
})

city().then(res => {
    cities.data = res
    let arr = []
    for (var i = 0; i < cities.data.length; i++) {
        if (cities.data[i].isHot === 1) {
            arr.push(cities.data[i])
        }
    }
    hot.data = arr
})
onMounted(async () => {
    let citys = await city()
    cities.data = await dict(citys)
})

let left = () => {
    router.back()
}
let select = (city) => {
    store.commit('changeCity', city)
    router.back()
}
let dict = (data) => {
    let field = 'pinyin'
    let letter_reg = /^[A-Z]$/
    let list = []
    for (let i = 0; i < data.length; i++) {
        list['#'] = []
        let letter = data[i][field].substr(0, 1).toUpperCase()
        if (!letter_reg.test(letter)) {
            letter = "#";
        }
        if (!(letter in list)) {
            list[letter] = new Array();
        }
        list[letter].push(data[i]);
    }

    var resault = new Array();
    for (var key in list) {
        resault.push({
            letter: key,
            list: list[key],
        });
    }
    resault.sort(function (x, y) {
        return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
    });
    var last_arr = resault[0];
    resault.splice(0, 1);
    resault.push(last_arr);
    var json_sort = {};
    for (var i = 0; i < resault.length; i++) {
        json_sort[resault[i].letter] = resault[i].list;
    }
    return json_sort;
}


</script>

<style lang="scss" scoped>
.tip {
    position: sticky;
    top: 0;
}

.container {
    background-color: #f4f4f4;
    background-color: #fff;

}

.cs li {
    line-height: 50px;
    background-color: white;
    border-bottom: 1px solid gray;
    padding-left: 10px;
}

.cs ul {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.dw1 {
    width: 100%;
    height: 80px;
    background-color: white;
}

.dw1 .GPS {
    font-size: 12px;
    color: #797D82;
    padding: 10px 0 0 10px;
}

.sb {
    width: 100px;
    height: 30px;
    font-size: 14px;
    background-color: #f4f4f4;
    line-height: 30px;
    margin-left: 20px;
    text-align: center;
    margin-top: 10px;
}

.hotbox {
    padding-left: 15px;
    padding-top: 15px;
    height: 120px;
}

.city-title {
    font-size: 13px;
    color: #797d82;
}

.city-index {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
}

.city-index>li {
    width: 33.3%;
    text-align: center;
    box-sizing: border-box;
    padding-bottom: 15px;
}

.city-index>li>div {
    height: 30px;
    background: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 7.5px;
    font-size: 14px;
    color: #191a1b;
}

.theheader {
    background: #f4f4f4;
}
</style>
